<template>
  <div class="address-box">
    <div class="header">
      <span class="receive">收件人信息</span>
      <a href="#">新增收货地址</a>
    </div>
    <div
      class="address-info clearFix"
      v-for="address in addressList"
      :key="address.id"
    >
      <span
        class="username"
        :class="{ selected: address.isDefault == 1 }"
        @click="changeDefaultAds(address, addressList)"
        >{{ address.consignee }}</span
      >
      <p>
        <span class="s1">{{ address.fullAddress }}</span>
        <span class="s2">{{ address.phoneNum }}</span>
        <span class="s3" v-show="address.isDefault == 1">默认地址</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Address",
  computed: {
    //获取地址列表
    addressList() {
      return this.$store.state.order.address || [];
    },
  },
  methods: {
    //修改选择默认地址
    changeDefaultAds(address, addressList) {
      addressList.forEach((item) => (item.isDefault = "0"));
      address.isDefault = "1";
    },
  },
};
</script>

<style scoped lang="less">
.address-box {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .receive {
      font-size: 16px;
      font-weight: 600;
    }
    a {
      color: rgb(96, 105, 240);
    }
  }
  .address-info {
    padding-left: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    .username {
      width: 150px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #ddd;
      position: relative;
    }
    .username::after {
      content: "";
      display: none;
      width: 13px;
      height: 13px;
      position: absolute;
      right: 0;
      bottom: 0;
      background: url(./images/choosed.png) no-repeat;
    }
    .username.selected {
      border-color: #3498db;
    }
    .username.selected::after {
      display: block;
    }
    .username:hover {
      background-color: #ddd;
    }
    p {
      width: 610px;
      line-height: 30px;
      margin-left: 30px;
      display: flex;
      align-items: center;
      .s2 {
        margin: 0 20px;
      }
      .s3 {
        display: inline-block;
        width: 55px;
        line-height: 20px;
        background-color: #878787;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>